import React, { useState } from 'react';
import { TreeTable } from '@/components/common/TreeTable';
import { Button, Space, message } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';

interface TreeNode {
  id: number;
  name: string;
  type: string;
  status: string;
  description?: string;
  children?: TreeNode[];
}

const TreeTableDemo: React.FC = () => {
  const [data, setData] = useState<TreeNode[]>([
    {
      id: 1,
      name: '根节点1',
      type: 'folder',
      status: 'active',
      description: '这是根节点1的描述',
      children: [
        {
          id: 2,
          name: '子节点1-1',
          type: 'file',
          status: 'active',
          description: '这是子节点1-1的描述',
          children: [
            {
              id: 3,
              name: '子节点1-1-1',
              type: 'file',
              status: 'inactive',
              description: '这是子节点1-1-1的描述',
            },
            {
              id: 4,
              name: '子节点1-1-2',
              type: 'file',
              status: 'active',
              description: '这是子节点1-1-2的描述',
            },
          ],
        },
        {
          id: 5,
          name: '子节点1-2',
          type: 'file',
          status: 'active',
          description: '这是子节点1-2的描述',
        },
      ],
    },
    {
      id: 6,
      name: '根节点2',
      type: 'folder',
      status: 'active',
      description: '这是根节点2的描述',
      children: [
        {
          id: 7,
          name: '子节点2-1',
          type: 'file',
          status: 'active',
          description: '这是子节点2-1的描述',
        },
      ],
    },
  ]);

  const columns = [
    {
      key: 'name',
      title: '名称',
      dataIndex: 'name',
      width: 200,
      render: (text: string, record: TreeNode, index: number, level: number) => (
        <span style={{ fontWeight: level === 0 ? 600 : 400 }}>
          {text}
        </span>
      ),
    },
    {
      key: 'type',
      title: '类型',
      dataIndex: 'type',
      width: 100,
      render: (type: string) => (
        <span style={{ color: type === 'folder' ? '#1890ff' : '#52c41a' }}>
          {type === 'folder' ? '文件夹' : '文件'}
        </span>
      ),
    },
    {
      key: 'status',
      title: '状态',
      dataIndex: 'status',
      width: 100,
      render: (status: string) => (
        <span style={{
          color: status === 'active' ? '#52c41a' : '#ff4d4f',
          padding: '2px 8px',
          borderRadius: '4px',
          background: status === 'active' ? '#f6ffed' : '#fff2f0',
          border: `1px solid ${status === 'active' ? '#b7eb8f' : '#ffccc7'}`,
        }}>
          {status === 'active' ? '激活' : '禁用'}
        </span>
      ),
    },
    {
      key: 'description',
      title: '描述',
      dataIndex: 'description',
      width: 300,
      ellipsis: true,
    },
  ];

  const handleAdd = (record: TreeNode) => {
    message.success(`添加节点: ${record.name}`);
    console.log('添加节点:', record);
  };

  const handleEdit = (record: TreeNode) => {
    message.success(`编辑节点: ${record.name}`);
    console.log('编辑节点:', record);
  };

  const handleDelete = (record: TreeNode) => {
    message.success(`删除节点: ${record.name}`);
    console.log('删除节点:', record);
  };

  const handleView = (record: TreeNode) => {
    message.success(`查看节点: ${record.name}`);
    console.log('查看节点:', record);
  };

  const nodeActions = [
    {
      key: 'add',
      label: '添加',
      icon: <PlusOutlined />,
      onClick: handleAdd,
    },
    {
      key: 'edit',
      label: '编辑',
      icon: <EditOutlined />,
      onClick: handleEdit,
    },
    {
      key: 'delete',
      label: '删除',
      icon: <DeleteOutlined />,
      onClick: handleDelete,
      danger: true,
    },
    {
      key: 'view',
      label: '查看',
      icon: <EyeOutlined />,
      onClick: handleView,
    },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <div style={{ marginBottom: '16px' }}>
        <h2>树形表格演示</h2>
        <p>这是一个展示树形表格功能的演示页面</p>
      </div>

      <TreeTable
        columns={columns}
        data={data}
        nodeActions={nodeActions}
        defaultExpandAll={true}
        title={() => '树形表格'}
        onSearch={(params) => {
          console.log('搜索参数:', params);
        }}
        onExport={(format) => {
          console.log('导出格式:', format);
        }}
        refresh={() => {
          message.success('刷新数据');
        }}
      />
    </div>
  );
};

export default TreeTableDemo;